.content {
	height: 100VH;
	width: 100VW;
	background: #ffffff;
	overflow: hidden;

	.indexlogin-box {
		width: 714rpx;
		height: 128rpx;
		border-radius: 10rpx;
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		left: 50%;
		margin-left: -357rpx;
		bottom: 50rpx;
		display: flex;
		align-items: center;
		
	.icons {
		padding-left: 20rpx;

		.uni-icons {
			font-size: 33rpx !important;
			font-weight: normal;
			color: #FFFFFF !important;
		}


	}

	.texts {
		font-size: 22rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		color: #FFFFFF;
		line-height: 35rpx;
		padding: 0 20rpx;
	}

	.buttons {
		padding-right: 15rpx;

		button {
			width: 126rpx;
			height: 45rpx;
			background: #4CA2EC;
			color: #ffffff;
			font-size: 22rpx;
			font-family: Adobe Heiti Std;
			font-weight: normal;
			padding: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			&::after{
				border: 0;
			}
		}
	}
	}

	.nav-style {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;

	// background-color: #f2f6f9;
	.baseNames {
		font-size: 32rpx;
		letter-spacing: 0;
		line-height: 48rpx;
		color: #ffffff;
		padding-left: 30rpx;
	}

	.nav-stylebox {
		position: relative;
		z-index: 5;
		margin-top: 10rpx;
		display: flex;
		padding-left: 20rpx;
		align-items: center;

		.uni-icons {
			font-size: 42rpx !important;
			color: #ffffff !important;
		}

		.nav-text {
			font-size: 22rpx;
			font-family: Adobe Heiti Std;
			font-weight: normal;
			color: #ffffff;
			margin-left: 10rpx;
			display: flex;
			align-items: center;

			.uni-icons {
				margin-left: 10rpx;
				font-size: 22rpx !important;
				color: #ffffff !important;
			}
		}

	}

	.height-bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			// z-index: -1;

			image {
				width: 100%;
			}
		}

	}

	.index-content {
		width: 100%;

		.my-video {
			position: relative;
			z-index: 2;
			display: flex;
			justify-content: center;
			margin: 40rpx 0;

			.video-box {
				width: 690rpx;
				padding-bottom: 30rpx;
				background: #ffffff;
				box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
				border-radius: 18rpx;

				.video-tops {
					width: 650rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					margin: 0 20rpx;
					border-bottom: 1rpx #E5E6EB solid;

					.header {
						display: flex;

						image {
							margin: 30rpx 0;
							margin-right: 5rpx;
							width: 68rpx;
							height: 68rpx;
							min-width: 68rpx;
							min-height: 68rpx;
							// margin-left: 15rpx;
							// overflow: hidden;
							border-radius: 4%;

						}
					}

					.message {
						display: flex;
						justify-content: center;
						flex-direction: column;
						margin-left: 15rpx;

						h2 {
							font-size: 32rpx;
							font-family: Adobe Heiti Std;
							font-weight: normal;
							color: #1D2129;
						}

						p {
							display: flex;
							align-items: flex-end;

							font-size: 24rpx;
							font-family: Adobe Heiti Std;
							font-weight: normal;
							color: #86909C;

							span {
								font-size: 22rpx;
								font-family: Adobe Heiti Std;
								font-weight: normal;
								color: #FFFFFF;
							}

							i {
								font-size: 33rpx;
								font-family: Adobe Heiti Std;
								font-weight: normal;
								font-style: italic;
								color: #FFFFFF;
								margin: 0 15rpx;
							}
						}
					}

					.links {
						flex: 1.4;
						display: flex;
						justify-content: flex-end;
						align-items: flex-end;
						flex-direction: column;
						// padding-right: 30rpx;
						position: relative;

						view {
							display: flex;
							align-items: center;
							font-family: Adobe Heiti Std;
							font-weight: normal;
							color: #FF8D1A;
							line-height: 42rpx;

							&.big-text {
								font-size: 28rpx;
								border-radius: 40rpx;
								background: #FFFFFF;
								box-shadow: 0px 4rpx 8rpx #AEC0D1;
								padding: 10rpx 20rpx;
							}

							.uni-icons {
								margin-left: 5rpx;
								color: #ECECEC !important;
								font-size: 32rpx !important;
							}

							&:nth-child(2) {
								position: absolute;
								left: 1.2em;
								width: 100%;
								bottom: -30rpx;
								text-align: center;
							}
						}

					}
				}

				.video-bottoms {
					width: 650rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					margin: 0 20rpx;
					margin-top: 20rpx;

					.iconBox {
						display: flex;
						align-items: center;
						margin-right: 30rpx;
						font-size: 26rpx;
						color: #4E5969;

						image {
							width: 40rpx;
							height: 40rpx;
							margin-right: 15rpx;
						}
					}
				}
			}
		}

		.video-wonderful {
			.video-titles {
				width: 690rpx;
				margin: 0 auto;
				display: flex;

				span {
					display: block;
					padding: 20rpx;
					margin-right: 15rpx;

					&.active {
						font-size: 33rpx;
						font-family: Adobe Heiti Std;
						font-weight: normal;
						color: #0085ff;
						border-bottom: 1px #0085ff solid;
					}
				}
			}

			.wonderful-box {
				.scroll-box {
					height: 50VH;
				}

				.video-Box1 {
					padding-bottom: 150rpx;
					// padding-bottom: 100rpx;
					width: 690rpx;
					margin: 20rpx auto;
					// columns: 2; // 默认列数
					// column-gap: 20rpx; // 列间距
					
					.srcoll-bottom {
						text-align: center;
						padding-bottom: 120rpx;
						font-size: 24rpx;
						color: #86909C;
					}

					.list-box {
						padding-bottom: 150rpx;
						display: grid;
						grid-template-columns: 1fr 1fr;
						grid-gap: 0 20rpx;
						// columns: 2; // 默认列数
						// column-gap: 20rpx; // 列间距
						// writing-mode: horizontal-tb;
						
						.lists {
							position: relative;
							overflow: hidden;
							width: 100%;
							break-inside: avoid;
							margin-bottom: 20rpx;
						
							>image {
								border-radius: 8rpx;
							}
						
							.play {
								position: absolute;
								right: 20rpx;
								top: 20rpx;
						
								image {
									width: 50rpx;
									height: 50rpx;
								}
							}
						
							video {
								width: 100%;
							}
						
							image {
								width: 100%;
							}
						
							p {
								width: 100%;
								display: flex;
								flex-direction: column;
						
								>span {
									height: 36rpx;
									font-size: 22rpx;
									font-family: Adobe Heiti Std;
									font-weight: normal;
									padding: 0 20rpx;
									color: #ffffff;
									background: rgba(0, 0, 0, 0.5);
									border-radius: 20rpx;
									position: absolute;
									left: 20rpx;
									bottom: 60rpx;
								}
						
								>b {
									display: flex;
									justify-content: space-between;
						
									span {
										display: flex;
										justify-content: center;
										align-items: center;
										font-size: 24rpx;
										color: #86909C;
						
										&.yuepai {
											color: #0085ff;
										}
						
										&.like {
											color: #F53F3F;
										}
						
										image {
											width: 25rpx;
											height: 25rpx;
											margin-right: 10rpx;
										}
									}
								}
							}
						}
					}
				}
			}

		}
		}
	}

	.popup-contentBox {
		background: #FFFFFF;
		border-radius: 18rpx 18rpx 0rpx 0rpx;

		// 弹出框样式
		.popup-content {
		width: 750rpx;
		min-height: 70VH;
		background: #FFFFFF;
		border-radius: 18rpx 18rpx 0rpx 0rpx;

		.loginForm-title {
			height: 94rpx;
			width: 714rpx;
			margin: 0 auto;
			text-align: center;
			line-height: 94rpx;
			position: relative;
			border-bottom: 2rpx #E4E4E4 solid;

			.uni-icons {
				position: absolute;
				left: 0;
				top: 0;
				font-size: 33rpx;
				font-weight: normal;
				color: #000000;
				width: 40rpx;
				height: 94rpx;
				text-align: center;
				line-height: 94rpx;
			}
		}

		.message-popup {
			width: 714rpx;
			margin: 0 auto;

			h3 {
				font-size: 22rpx;
				font-family: Adobe Heiti Std;
				font-weight: normal;
				color: #6A6A6A;
				line-height: 120rpx;
			}

			.upLoad-pic {
				display: flex;

				.pic-box {
					width: 260rpx;
					height: 193rpx;
					background: #F5F5F5;
					border-radius: 9rpx;
					margin-right: 30rpx;
					overflow: hidden;

					.pic-border {
						width: 260rpx;
						height: 157rpx;
						display: flex;
						justify-content: center;
						align-items: center;

						>view {
							width: 168rpx;
							height: 110rpx;
							position: relative;
							border: 2rpx #4CA2EC solid;
							display: flex;
							justify-content: center;
							align-items: center;

							image {
								width: 100%;
								height: 100%;
							}

							&:after {
								content: '';
								width: calc(100% - 24px);
								height: 110rpx;
								position: absolute;
								left: 12px;
								top: -1px;
								// bottom: -1px;
								// background: #f5f5f5;
								border-bottom: 2rpx #F5F5F5 solid;
								border-top: 2rpx #F5F5F5 solid;
							}

							&:before {
								content: '';
								width: 168rpx;
								height: calc(100% - 24px);
								position: absolute;
								left: -1px;
								// right: -1px;
								top: 12px;
								// background: #f5f5f5;
								border-left: 2rpx #F5F5F5 solid;
								border-right: 2rpx #F5F5F5 solid;
							}
						}
					}

					.pic-texts {
						width: 260rpx;
						height: 36rpx;
						background: #4CA2EC;
						padding: 0;
						line-height: 36rpx;
						text-align: center;
						font-size: 22rpx;
						font-family: Adobe Heiti Std;
						font-weight: normal;
						color: #FFFFFF;
					}
				}
			}
		}

		button {
			width: 714rpx;
			height: 72rpx;
			background: #4CA2EC;
			border-radius: 36rpx;
			font-size: 33rpx;
			font-family: Adobe Heiti Std;
			font-weight: normal;
			color: #FFFFFF;
			margin-top: 30rpx;
		}

		.tips {
			width: 714rpx;
			margin: 0 auto;
			margin-top: 30rpx;
			display: flex;
			flex-direction: column;
			padding-bottom: 20rpx;

			h2 {
				font-size: 22rpx;
				font-family: Adobe Heiti Std;
				font-weight: normal;
				color: #000000;
				line-height: 50rpx;
			}

			view {
				font-size: 22rpx;
				font-family: Adobe Heiti Std;
				font-weight: normal;
				color: #555353;
				line-height: 35rpx;
			}
		}
		}
	}

	.vue-ref {
		padding: 0 !important;
	}

	.skiingVideo-list {
		width: 100VW;
		border-radius: 20rpx 20rpx 0 0;
		background-color: #ffffff;
		position: relative;

		.title {
		margin-top: 8VH;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		position: relative;

		.uni-icons {
			position: absolute;
			left: 20rpx;
			top: 0;
		}
		
	}

	.skiingVideo-button {
		position: absolute;
		top: 40%;
		right: 30rpx;
		bottom: 100rpx;
		display: flex;
		flex-direction: column;
		// align-items: center;
		// justify-content: flex-start;
		padding: 20rpx 0;
		align-items: center;
		font-size: 32rpx;
		color: #929292;
		text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #ffffff, 0 0 40px #ffffff; //设置发光效果

		image {
			width: 50rpx;
		}
		
		// view {
		// 	text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #ffffff, 0 0 40px #ffffff; //设置发光效果
		// 	font-weight: 600;
		// }
	}
	.shuiyin{
		position: absolute;
		width: 300rpx;
		height: 10rpx;
		left:30rpx;
		top:180rpx;
		color: #ffffff;
		font-size: 45rpx;
		opacity: 0.6;
		transform: rotate(-30deg);
		text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #ffffff, 0 0 40px #ffffff; //设置发光效果
	}

	.yuepai-button {
	// margin-top: 30rpx;
		top: 56%;
		position: absolute;
		right: 30rpx;
		bottom: 100rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		// justify-content: flex-start;
		padding: 30rpx 0;
		align-items: center;
		font-size: 32rpx;
		color: #929292;
		text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #ffffff, 0 0 40px #ffffff; //设置发光效果

		view {
			text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #ffffff, 0 0 40px #ffffff; //设置发光效果
			font-weight: 600;
		}

		.uni-icons {
			font-size: 50rpx !important;
			color: #929292 !important;

		}

		&.active {
			color: #4CA2EC;

			.uni-icons {
				font-size: 50rpx !important;
				color: #4CA2EC !important;
			}
		}
	}

	.videoBox {
		video {
			width: 100%;
		}
	}
}
.imageBigs{
	width: 90vw;
	max-height: 90vh;
	position: relative;
	.text{
		position: absolute;
		color: #ffffff;
		left: 5%;
		top: 25%;
		color: #ffffff;
		font-size: 45rpx;
		opacity: 0.6;
		transform: rotate(-30deg);
		text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #ffffff, 0 0 40px #ffffff; //设置发光效果
	}
	image{
		max-height: 90vh;
		width: 90vw;
	}
}
